<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar fixed placeholder>
      <!-- 左边插槽 -->
      <template #left>
        <div class="logo"></div>
      </template>
      <!-- 右边插槽 -->
      <template #right>
        <van-button round class="search-btn" size="small" icon="search" @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 横向滑动条 -->
    <van-tabs v-model="active" @click="tabclick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="item in list" :key="item.art_id" :title="item.title"
            @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <!-- 自定义列表 -->
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item v-for="(value,index) in item.cover.images" :key="index">
                     <van-image 
                     :src="value" 
                     lazy-load
                     />
                    </van-grid-item>
                    
                    
                  </van-grid>
                  <div>
                    <span>{{item.aut_name}}</span>&nbsp;
                    <span>{{item.comm_count}}评论</span>&nbsp;
                    <span>{{item.pubdate | fromNow}}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

// 导入接口
import{getChannelList} from './home.js'
import{getArticleList} from './home.js'
import moment from 'moment'
// 设置语言
moment.locale('zh-cn')

export default {
  name: "home",
  data() {
    return {
      active: 0, //tab栏
      channels: [], //频道管理
      list: [], //文章列表
      loading: false, //加载状态  触底后自动变成true，此时执行onload逻辑
      finished: false, //是否加载完毕  false:继续加载  true:触底之后就不会加载了
      
      isLoading: false,//下拉刷新动画
    };
  },
  async created() {
    // 加载频道列表
    let res = await getChannelList()
    console.log(res);
    // 绑定数据
    this.channels = res.data.data.channels
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow()
    }
  },
  methods: {
    // 上拉加载更多
    async onLoad() {
      // 判断是不是第一页
      if( !this.timestamp){
        this.timestamp = Date.now()
      }
      // 请求数据
      let res = await getArticleList({
        channel_id:this.channels[this.active].id,
        timestamp:this.timestamp
      })
      console.log(res);
      // 绑定数据
      this.timestamp = res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      console.log(res);
      // 关闭加载动画
      this.loading = false
      // 最多50条 如果全加载完 则停止滚动
      if(this.list.length >= 50){
        this.finished = true
      }
    },

    onRefresh() {
      // 清空时间戳 作用是下拉刷新后从第一页开始
      this.timestamp = null
      //0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false;
      //1.先清空旧数据
      this.list = [];
      //2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true;
      //3.重新请求数据
      this.onLoad();
      //4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.isLoading = false;
    },
    tabclick(){
      this.onRefresh()
    }
  },
};
</script>

<style lang="less">
.home-container {
  // 1vh = 屏幕高度 1/100
  height: 100vh;
  padding-top: 46px;
  padding-bottom: 50px;
  box-sizing: border-box;
  /* 1.顶部栏 */
  .van-nav-bar {
    background-color: #00affd;
    .logo {
      /* 注意点
      如果在图片路径中使用@，默认前面会有./(./@/image.png) 导致编译器报错
      解决： 在@前面添加~ (去掉默认./)
      */
      background: url("../../assets/logo.png") no-repeat;

      background-size: cover;
      width: 100px;
      height: 30px;
    }

    // 搜索按钮
    .search-btn {
      background-color: #5babfb;
      width: 100px;
      font-size: 14px;
      border: none;
      .van-icon {
        color: #fff;
      }
      .van-button__text {
        color: #fff;
      }
    }
  }
  /* 2.tablan布局 */
  .van-tabs {
    /* 2.1 头部tab栏 */
    .van-tabs__wrap {
      position: fixed;
      /* 解决频道列表不能自动滚动bug
    当频道列表数据很多的时候会被内容撑开，导致无法自动滚动。给一个宽度即可
    */
      position: fixed;
      top: 46px;
      z-index: 10;
      left: 0;
    }

    /* 2.2 内容 */
    .van-tabs__content {
      /* 设置列表栏的上margin,避免被导航栏与tab栏遮挡(固定定位导致脱标) */
      margin-bottom: 46px;
    }
  }
}
</style>
